<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 10254
  Date: 2021/3/22
  Time: 20:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<html>
<head>
    <title>购物车</title>
    <style>
        img {
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
　　<% response.setHeader("Pragma", "No-cache");
    response.setHeader("Cache-Control", "No-cache");
    response.setDateHeader("Expires", -1);
    response.setHeader("Cache-Control", "No-store"); %>
<h1>我的购物车</h1>
<span><a href="/query">首页</a></span>
<button onclick="window.location.href='clearcar'">清空购物车</button>
<%--用来接收总价格--%>

<c:forEach items="${requestScope.carInfos}" var="goods" varStatus="status">
    <div>

        <img src="/images/${goods.goods_image}"/>
        商品名称：${goods.goods_name}
        商品价格：${goods.goods_price}
        商品数量：
        <button id="but+" onclick="changeNumByBut(${sessionScope.state.user_id},${goods.goods_id},'+')">+</button>

        <input type="text" id="count${goods.goods_id}" value="${goods.goods_num}"
               onchange="changeNumByblur(${sessionScope.state.user_id},${goods.goods_id})" style="text-align:center"
               size="3">

        <button id="but-" onclick="changeNumByBut(${sessionScope.state.user_id},${goods.goods_id},'-')">-</button>

        <a id="delete" href="${pageContext.request.contextPath}/deletegood?goods_id=${goods.goods_id}">删除</a>

        <c:set var="price" value="${price+goods.goods_num*goods.goods_price}"/>
    </div>

</c:forEach>
<span id="allprice">总价格:${requestScope.allprice}</span>

<form action="/buy">
    <input type="submit" value="购买">
</form>



<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>

    //使用加减号改变数量时
    function changeNumByBut(user, info, but) {
        let user_id = user;
        let good_id = info;

        if (but == '+') {
            //之后用ajax处理
            let count = $("#count" + good_id).val();

            if (count < 99) {
                $("#count" + good_id).val(++count);
                $.get("${pageContext.request.contextPath}/update", {
                    goods_id: good_id,
                    num: $("#count" + good_id).val()
                }, function (date) {
                    if (date == null) {
                        alert("服务器错误")

                    } else {
                        $("#allprice").html("总价格:" + date)
                    }
                })
            } else {
                alert("超出最大数量")
            }

        } else {
            //之后用ajax处理
            let count = $("#count" + good_id).val();
            if (count > 1) {
                $("#count" + good_id).val(--count);
                $.get("${pageContext.request.contextPath}/update", {
                    goods_id: good_id,
                    num: $("#count" + good_id).val()
                }, function (date) {
                    if (date == null) {
                        alert("服务器错误")

                    } else {
                        $("#allprice").html("总价格:" + date)
                    }
                })
            } else {
                alert("数量过小")
            }

        }
    }

    //当货物数量改变时
    function changeNumByblur(user, info) {
        let good_id = info
        let num = $("#count" + info).val();

        if (isNaN(num)) {
            alert("输入异常")
            $("#count" + info).val(1);
            return;
        }
        if (num < 1) {
            alert("商品数量过小")
            $("#count" + info).val(1);
            return;
        }
        if (num > 99) {
            alert("商品不能超过99个")
            $("#count" + info).val(1);
            return;
        }
        $.get("${pageContext.request.contextPath}/update", {
            goods_id: good_id,
            num: $("#count" + good_id).val()
        }, function (date) {
            if (date == null) {
                alert("服务器错误")

            } else {
                $("#allprice").html("总价格:" + date)

            }
        })

    }

    // 删除时
    $(function () {
        $("#delete").on("click", function () {
            $.get("${pageContext.request.contextPath}/update", {
                goods_id: good_id,
                num: $("#count" + good_id).val()
            }, function (date) {
                if (date == null) {
                    alert("服务器错误")

                } else {
                    $("#allprice").html("总价格:" + date)
                }
            })
        })

    })

</script>


</body>
</html>
